<template>
  <div>
    <van-popup v-model="show" round position="bottom" style="background: none;">
      <div class="password_pop">
        <div class="pass">
          <div class="title rel tac">
            {{ $t('page.doc28') }}
            <div class="abs" @click="passwordShowClick">
              <van-icon name="cross"/>
            </div>
          </div>
          <div class="box rel" :class="{on:isPc}">
            <input type="text" v-model="password" maxlength="6" class="abs" ref="getFocus">
            <van-password-input
                :gutter="20"
                :value="password"
                :length="6"
                :focused="showKeyboard"
                @focus="showKeyboard = true"
            />
          </div>
          <button @click="$emit('submit',password)"
                  :disabled="password&&password.length!=6">
                  {{ $t('page.doc29') }}
          </button>
        </div>
        <div class="jianpan" v-if="!isPc">
          <p>{{ $t('page.doc30') }}</p>
          <van-number-keyboard
              v-model="password"
              :show="showKeyboard"
              @blur="showKeyboard = true"
          />
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
export default {
  props: ['value'],
  data() {
    return {
      password: '',
      isPc: false,
      showKeyboard: true,
    }
  },
  computed: {
    show: {
      get() {
        return this.value
      },
      set(value) {
        this.$emit('input', value)
      }
    }
  },
  watch:{
    show(){
      if(this.show){
        this.password = ''
      }
    },
    password(){
      if(this.password.length>6){
        this.password = this.password.slice(0,6)
      }
    },
  },
  methods: {
    passwordShowClick() {
      this.show = false
      this.password = ''
    },
  }
}
</script>

<style lang="less" scoped>

</style>